<template>

  <div class="app-container">
    <div class="header">
      <div class="back-arrow">&#8249;</div>
      <div  v-if="work" class="user-info">
        <img :src="work.avatar" alt="User Avatar" class="avatar">
        <span class="username">{{ work.name }}</span>
      </div>
      <div class="more-options" @click="toggleActions">...</div>
    </div>
    <div class="content">
      <!-- 帖子内容部分，与之前示例类似，此处省略 -->
    </div>
    <div v-show="showActions" class="action-menu">
      <div class="action-item">
        <img :src="'https://dbs-dbsww.oss-cn-beijing.aliyuncs.com/R-C.jpg'" alt="WeChat" class="action-icon">

        <span class="action-text">微信好友</span>
      </div>
      <div class="action-item">
        <img :src="'https://dbs-dbsww.oss-cn-beijing.aliyuncs.com/OIP-C.jpg'" alt="Moments" class="action-icon">
        <span class="action-text">朋友圈</span>
      </div>
      <div class="action-item">
        <img :src="'https://dbs-dbsww.oss-cn-beijing.aliyuncs.com/7c7bc23546a833f49eedb0b9ec4257c8.jpg'"
             alt="Generate Image" class="action-icon">
        <span class="action-text">生成图片</span>
      </div>
      <div class="action-item">
        <img :src="'https://dbs-dbsww.oss-cn-beijing.aliyuncs.com/26706627_150941595087_2.jpg'" alt="Copy Link"
             class="action-icon">
        <span class="action-text">复制链接</span>
      </div>
      <div class="action-item">
        <div class="action-item" @click="showDeleteModal = true">
          <img :src="'https://dbs-dbsww.oss-cn-beijing.aliyuncs.com/cf30617931a0f8cd5c24db0362f0a6cb.jpg'" alt="Delete"
               class="action-icon">
          <span class="action-text">删除作品</span>
        </div>
      </div>
      <div class="delete-modal" v-if="showDeleteModal">
        <div class="modal-content">
          <h3>确认删除</h3>
          <p>删除后内容将无法恢复，是否确认删除？</p>
          <div class="modal-buttons">
            <button @click="showDeleteModal = false">取消</button>
            <button class="delete-btn" @click="handleDelete">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="content">
    <div class="post">
      <h3 class="post-title">韩系妆容类型区分</h3>
      <p class="post-description">AI教你如何区分韩系妆容，什么样的脸型适合什么类型的妆容~</p>
      <div class="separator">以下对话内容使用AI生成</div>
      <div class="message-list">
        <div class="message user-message">
          <img :src="user.avatar" alt="User Avatar" class="avatar">
          <div class="message-content">
            <p>韩系妆容类型有哪几种？什么样的脸型适合什么类型的妆容，请分别推荐几种妆容给我</p>
          </div>
        </div>
        <div class="message ai-message">
          <div class="message-content">
            <p>韩系妆容非常注重皮肤质感，整体妆容以清新、自然、精致为主。以下为几种适合不同脸型的韩系妆容推荐：</p>
            <p>对于圆脸：</p>
            <p>
              圆脸的特点是脸部线条给人一种可爱、温柔的感觉，因此可以选择一些能够拉长脸型的妆容来增强成熟感。以下是两种适合圆脸的韩系妆容：</p>
            <p>
              韩式青春淑女妆：使用近肤色的眼影，做好眼妆的打底，然后用珠米色眼影晕染，提亮眼窝后晕染双眼皮。眼尾的位置要稍微拉长，不能明显上升或下垂，这样可以使眼睛看起来更修长。搭配自然的眉形和淡淡的口红，可以让妆容看起来更加清新和自然。</p>
          </div>
        </div>
      </div>
      <div class="footer">
        <span class="date">09月12日 12:00</span>
        <span class="report">举报作品</span>
      </div>
    </div>
  </div>
  <div class="interaction">
    <span class="like-count">101</span>
    <i class="icon-heart"></i>
    <span class="comment-count">101</span>
    <i class="icon-comment"></i>
    <button class="chat-button">我也要聊</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const getWorkId =()=>{
  sessionStorage.getItem('workId');
  user.workId = workId;
}

const work = ref();


const getWorks = () => {
  axios.post('/works/getWorkList',user.workId).then((response)=>{
    work.value = response.data;
  })
}

// 定义响应式数据
const user = ref({
  name: '',
  avatar: ''
});
const showActions = ref(false);
const wechatIcon = ref('./wechat - icon.png');
const momentsIcon = ref('./moments - icon.png');
const generateImageIcon = ref('./generate - image - icon.png');
const copyLinkIcon = ref('./copy - link - icon.png');
const deleteIcon = ref('./delete - icon.png');
const showDeleteModal = ref(false);
const workId = ref('');

// 定义方法
const toggleActions = () => {
  showActions.value =!showActions.value;
};
// 创建 axios 实例
const apiClient = axios.create({
  baseURL: 'http://localhost:1017',
  withCredentials: false,
  headers: {
    'Content-Type': 'application/json'
  }
});





const handleDelete = () => {
  // 确保已获取Token
  const Token = sessionStorage.getItem("phone");
  if (!Token) {
    console.error('未登录,请先登录');
    return;
  }




  // 添加请求拦截器
  apiClient.interceptors.request.use(
    config => {
      config.headers['Token'] = Token;
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );

  // 准备请求数据
  const requestData = {
    workId: workId.value
  };

  // 发送删除请求
  apiClient.post('/works/getWorkDelete', requestData)
    .then(response => {
      const data = response.data;
      if (data.code === 200) {
        showDeleteModal.value = false;
        // 删除成功后的处理,比如返回上一页
        router.back();
      } else {
        console.error('删除失败:', data.message);
      }
    })
    .catch(error => {
      console.error('删除请求失败:', error);
    });
};

const confirmDelete = () => {
  showDeleteModal.value = true;
};



</script>



<style scoped>
.app-container {
  max-width: 400px;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-arrow {
  font-size: 24px;
  color: #888;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-size: 16px;
  color: #333;
}

.more-options {
  font-size: 20px;
  color: #888;
  margin-left: auto;
}

.content h3 {
  font-size: 18px;
  color: #333;
  margin-top: 0;
}

.content p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 10px 0;
}

.separator {
  text-align: center;
  color: #888;
  margin: 10px 0;
}

.message-list {
  margin-top: 20px;
}

.message {
  display: flex;
  margin-bottom: 10px;
}

.user-message.avatar {
  background-color: #ccc;
}

.ai-message.avatar {
  background-color: #007bff;
}

.message-content {
  max-width: 80%;
  padding: 10px;
  border-radius: 10px;
}

.user-message.message-content {
  background-color: #f0f0f0;
  margin-left: 10px;
}

.ai-message.message-content {
  background-color: #e6f7ff;
  margin-right: 10px;
}

.footer {
  display: flex;
  justify-content: space-between;
  color: #888;
  font-size: 12px;
  margin-top: 10px;
}

.interaction {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.icon-heart,
.icon-comment {
  font-size: 18px;
  color: #888;
  margin: 0 5px;
}

.chat-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-left: auto;
}

.app-container {
  max-width: 400px;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-arrow {
  font-size: 24px;
  color: #888;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-size: 16px;
  color: #333;
}

.more-options {
  font-size: 20px;
  color: #888;
  margin-left: auto;
  cursor: pointer;
}

.action-menu {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.action-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.app-container {
  max-width: 400px;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-arrow {
  font-size: 24px;
  color: #888;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  font-size: 16px;
  color: #333;
}

.more-options {
  font-size: 20px;
  color: #888;
  margin-left: auto;
  cursor: pointer;
}

.action-menu {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 10px;
}

.action-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.app-container {
  /* 页面容器样式 */
}

.action-bar {
  display: flex;
  justify-content: space-around;
  background-color: #f0f0f0;
  padding: 10px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.action-item img {
  width: 30px;
  height: 30px;
}

.delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
}

.delete-btn {
  background-color: #ff4d4f;
  color: #fff;
}

.action-text {
  font-size: 12px;
  margin-top: 5px;
}

.action-text {
  font-size: 12px;
  margin-top: 5px;
}

</style>